<template>
    <div>
        <div id="wrapper" class="pb-200" v-show="!this.checkBox&&!this.lockShow">
            <!--顶部fixed部分-->
            <div class="top-header border-bottom fixed-top">

                <div class="top-back" @click="goBack()">
                    <a ></a>
                </div>
                <h2 class="f36 ">云验号</h2>
                <div class="top-right" @click="homeShow()">
                    <a class="sharelist"></a>
                </div>
            </div>
            <div class="yun-progress-box bg-000 py-30 mt-97 border-bottom" v-if="getYYH!=3">
                <p class="color-fff f30 text-center mt-10">登录帐号平均等待时间：1-5分钟</p>
                <div class="yun-mascot mt-30 text-center">
                    <img src="../../../assets/images/yun-mascot.gif" alt="">
                </div>
                <div class="yun-progress-bar-box mt-30 text-center">
                    <div class="yun-progress-bar bg-fff">
                        <!--进度等于这个span的长度（百分比）-->
                        <span class="yun-progress-bar-cur fl" :style="{'width' : processState/7*100+'%'}"></span>
                    </div>
                    <span class="yun-progress-num color-999 ml-10 f24"><span class="fontarial" style="width: 30px">{{Math.floor(processState/7*100)}}</span>%</span>
                </div>
                <p class="f24 color-fff text-center mt-20">{{message}}</p>
            </div>
            <div class="yun-img-box border-bottom mt-97 clearfix"  v-if="getYYH == 3">
                <ul class="clearfix">
                    <li class="fl"><img src="../../../assets/images/yyhbanner.jpg" alt="云验号">
                    </li>
                    <div></div>
                </ul>
            </div>
            <div class="new-yun-tips-box clearfix color-fff py-15 px-30">
                <i class="new-icon-yun mr-30 fl"></i>
                <p class="new-yun-tips-word f24 color-m1 fl">买家付款后，可以通过该服务进入游戏查验所购买的帐号信息。验号完毕后可联系客服确认购买。</p>
            </div>

            <div class="search-game border-bottom mt-20">
                <div class="sgame bg-fff f32">
                    <span class="color-000">登录信息</span>
                </div>
            </div>
            <div class="rechseach-titl yun-detail pt-30 clearfix bg-fff px-30">
                <div class="sto_rent f30 fl">商品标题</div>
                <div class="sto_rerg f30 fr text-left color-000" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{this.goodsTitle}}</div>
            </div>
            <div class="rechseach-titl yun-detail clearfix bg-fff px-30">
                <div class="sto_rent f30 fl">区服信息</div>
                <div class="sto_rerg f30 fr text-left color-000">{{this.regionName}}</div>
            </div>

            <div class="rechseach-titl yun-detail clearfix bg-fff px-30">
                <div class="sto_rent f30 fl">登录次数</div>
                <div class="sto_rerg f30 fr text-left color-000">{{this.yyhCount}}/2次</div>
            </div>
            <div class="rechseach-titl yun-detail clearfix bg-fff px-30" v-show="checkRes.length<1">
                <div class="sto_rent f30 fl">验号结果</div>
                <div class="sto_rerg f30 fr text-left sto-height">
                    <p class=" color-000">查验中</p>
                </div>
            </div>
            <div class="rechseach-titl yun-detail clearfix bg-fff px-30" v-show="checkRes.length>=1">
                <div class="sto_rent f30 fl">验号结果</div>
                <div class="sto_rerg f30 fr text-left sto-height">
                    <p v-for="item in this.checkRes" class=" color-000">{{doneOrFalse(item.validateState)}}<em class="fr f26 fontarial color-999">{{initTime(item.creatTime)}}</em></p>
                </div>
            </div>
            <!--&lt;!&ndash;状态1&ndash;&gt;-->
            <!--<div class="yun-confirm fixed-bottom border-top clearfix bg-fff px-30 py-25">-->
            <!--<router-link :to="'/vue/buyerCenter/buyerOrder/mobgoods/'+this.orderId">-->
            <!--<a class="f36 border-radius border-666 color-666 text-center" >返回</a>-->
            <!--</router-link>-->

            <!--</div>-->
            <!--状态2-->
            <!--<div class="yun-confirm fixed-bottom clearfix bg-fff px-30 py-25">-->
            <!--<a class="color-666 f36 bg-fff fl text-center border mr-4" href="javascript:void(0)">再验一次</a>-->
            <!--<a class="color-fff f36 bg-m1 fl text-center" href="javascript:void(0)">联系客服</a>-->
            <!--</div>-->
            <!--验证失败弹框-->
            <!--新底部-->
            <div class="fixed-bottom mancon-btn pr-30 py-20 bg-fff border-top">
                <a class="f30 color-666 border text-center border-radius ml-15 cancel fr" @click="checkFaild = true">验号失败</a>
                <a class="f30 color-m1 border text-center border-radius ml-15 border-color bg-fffdfd fr" @click="contactService()">确认购买</a>
                <a class="f30 color-m1 border text-center border-radius border-color bg-fffdfd fr" v-show="showAnniu" @click="reCheck()">{{recheckmsg}}</a>
            </div>
            <!--商品列表下拉-更多消息-->
            <div class="more_message border  f36" style="z-index:100" v-show="threePoint">
                <ul>
                    <a>
                        <router-link to="/vue/message">
                            <li class="list-more border-bottom">
                                <i class="android"></i>消息</li>
                        </router-link>

                    </a>
                    <a>
                        <router-link to="/">
                            <li class="list-more">
                                <i class="home_back"></i>首页</li>
                        </router-link>
                    </a>
                </ul>
            </div>

            <div class="bomb-box bg-fff" v-show="dialogBoxShow" style="margin-top: -1.6rem">
                <div class="f32 color-000 text-center p-50 border-bottom">
                    <p class="lh-60">{{errMessage}}</p>
                </div>
                <div class="bomb-one-confirm">
                        <a class="f32 color-m2 text-center" @click="goBack()">返回</a>
                </div>
            </div>
            <div class="bomb-box bg-fff" style="margin-top: -2rem" v-show="checkFaild">
                <div class="f32 color-000 text-center p-50">
                    <p class="lh-60">确定查验失败？</p>
                </div>
                <div class="bomb-two-confirm border-top">
                    <router-link class="f32 color-m2 fl  border-right text-center" :to="'/vue/buyerCenter/buyerOrder/mobgoods/'+orderId">
                        <div @click="enterService(0)">是 </div>
                    </router-link>
                    <a class="f32 color-m2 fl  text-center" @click="checkFaild = false">否</a>
                </div>
            </div>
            <!--弹框背景-->
            <div class="maskDiv2" v-show="dialogBoxShow||checkFaild" @click="checkFaild = false"></div>
            <!-- <div class="bomb-box bg-fff" style="margin-top: -2rem" v-show="checkFaild1">
                                    <div class="f32 color-000 text-center p-50">
                                        <p class="lh-60 color-m2">禁止二次验号<br>将进入游戏</p>
                                        <p class="lh-60 color-m2">禁止二次提交</p>
                                    </div>
                                    <div class="bomb-two-confirm border-top">
                                        <a class="f32 color-m2 fl  text-center" @click="checkFaild1 = false" style="width:100%">确 定</a>
                                    </div>
                                </div>
                                <div class="maskDiv2" v-show="dialogBoxShow||checkFaild1" @click="checkFaild1 = false"></div> -->
            <!--弹框背景-->
            <!--<redfinger-js src="http://gztest.eplay.gc.com.cn/websocket/js/redfinger.min.js"></redfinger-js>-->
            <redfinger-js src="https://m.5173.com/js/redfinger.min.js"></redfinger-js>
        </div>
        <div id="redFingerPhone" v-show="this.checkBox">
            <!--<div id="closeBoxCanvs"></div>-->
            <div v-drag="greet" id="closeBox" class="clearfix" v-if="closeBoxShow">
                <div class="fl f18" id="closeRedFinger">{{initTime1(this.countTime)}}</div>
                <p class="close fl f32" @click="this.closeBox1"></p>
            </div>
        </div>
        <div id="lockBox" v-show="this.lockShow">
            <img src="../../../assets/images/lock.jpg" alt="">
        </div>
    </div>
</template>

<script>
import Vue from "vue";
//import countdown from 'components/common/timecountdown'
Vue.directive('drag',//自定义指令
    {
        bind: function(el, binding) {
            let oDiv = el;   //当前元素
            let self = this;  //上下文
            oDiv.addEventListener("touchstart", function(e) {
                //鼠标按下，计算当前元素距离可视区的距离
                let disX = e.changedTouches[0].clientX - oDiv.offsetLeft;
                let disY = e.changedTouches[0].clientY - oDiv.offsetTop;


                oDiv.addEventListener("touchmove", function(e) {
                    //通过事件委托，计算移动的距离
                    let l = e.changedTouches[0].clientX - disX;
                    let t = e.changedTouches[0].clientY - disY;
                    //判断边界
                    if (l <= 0) {
                        l = 0;
                    } else if (l >= window.innerWidth - oDiv.offsetWidth) {
                        l = window.innerWidth - oDiv.offsetWidth;
                    }
                    if (t <= 0) {
                        t = 0;
                    } else if (t >= window.innerHeight - oDiv.offsetHeight) {
                        t = window.innerHeight - oDiv.offsetHeight;
                    }
                    //移动当前元素
                    oDiv.style.left = l + 'px';
                    oDiv.style.top = t + 'px';
                    //将此时的位置传出去
                    binding.value({ x: e.pageX, y: e.pageY })
                })
                document.addEventListener("touchend", function(e) {
                    document.ontouchmove = null;
                    document.ontouchend = null;
                })
            })

        }
    }
);
export default {
    data() {
        return {
            showAnniu: true,
            closeBoxShow: false,
            checkFaild: false,
            checkFaild1: false,
            threeSec: 0,
            lockShow: false,
            checkBox: false,
            validateId: "",
            goodsId: "",
            orderId: "",
            goodsTitle: "",
            regionName: "",
            yyhCount: 1,
            countTime: 300000,
            padCode: "",
            resultCode: 0,
            webControlCode: "",
            controlIp: "",
            controlPort: 0,
            sessionId: "",
            userId: 0,
            getYYH: 1,
            val: '',
            loginTime: 0,
            endTime: 0,
            interval: null,
            checkRes: [],
            serviceQQ: "",
            link: false,
            redfingerInit: false,
            dialogBoxShow: false,
            message: "加载中（加载完成后即可查验帐号）",
            code: 0,
            source: 0,
            processState: 0,
            validateState: 0,
            threePoint: false,
            messageIndex: 0,
            errMessage:0,
            redfingerErrCode:"",
            scriptErrCode:"",
            yyhServer:"https://yyh.5173.com",
            processback:false,
            fiveCount:5,
            recheckmsg:'再次查验'
            //        messageArr:["正在登陆游戏，平均等待时间为2-5分钟","云验号需要稳定的网络环境，建议在wifi下使用","使用云验号，需关闭手机自动旋转屏幕功能","每个账号仅可以查验2次","买家查验过程中仅有查看角色装备权限","如买家任何行为导致卖家帐号损失","则默认买家同意购买该商品，交易继续进行"],
        }
    },
    components: {
        'redfinger-js': {
            render(createElement) {
                return createElement('script', { attrs: { type: 'text/javascript', src: this.src } });
            },

            props: {
                src: { type: String, required: true },
            },
        },
    },

    watch: {

    },
    created: function created() {
        this.goodsId = this.$route.query.goodsId;
        this.validateId = this.$route.query.validateId;
        this.orderId = this.$route.query.orderId;
        this.getVideoParams()
    },
    mounted: function mounted() {
        var self = this;
        window.addEventListener("orientationchange", function() {
            // Announce the new orientation number
            //            alert(window.orientation);
            var redfingerDiv = document.getElementById("redFingerPhone");
            var closeBoxDiv = document.getElementById("closeBox");
            if (self.checkBox == true) {
                if (window.orientation == 90) {
                    self.lockShow = true;
                    self.checkBox = false;
                    //                redfingerDiv.style.transform = 'rotate(-' + window.orientation + 'deg)';
                    //                redfingerDiv.style.width = "100%"
                    //                closeBoxDiv.style.transform = 'rotate(-' + window.orientation + 'deg)';
                } else if (window.orientation == -90) {
                    self.lockShow = true;
                    self.checkBox = false;
                    //                redfingerDiv.style.transform = 'rotate(' + window.orientation + 'deg)';
                    //                redfingerDiv.style.width = "100%"
                    //                closeBoxDiv.style.transform = 'rotate(' + window.orientation + 'deg)';
                } else if (window.orientation == 180) {
                    self.lockShow = false;
                    self.checkBox = true;
                    //                redfingerDiv.style.transform = 'rotate(' + window.orientation + 'deg)';
                    //                redfingerDiv.style.width = "100%"
                    //                closeBoxDiv.style.transform = 'rotate(' + window.orientation + 'deg)';

                } else if (window.orientation == 0) {
                    self.lockShow = false;
                    self.checkBox = true;
                    //                redfingerDiv.style.transform = 'rotate(' + window.orientation + 'deg)';
                    //                redfingerDiv.style.width = "100%"
                    //                closeBoxDiv.style.transform = 'rotate(' + window.orientation + 'deg)';
                }
            } else {
                if (self.lockShow == true) {
                    self.lockShow = false;
                    self.checkBox = true;
                }
            }

            //            alert(window.orientation)

        }, false);
        //        self.$toast("为获得最佳的体验，请锁定屏幕旋转为竖屏后查验")
        this.getCheckHistory();
        this.$http.get(this.$CONSTANTS.APIGoods + "goods/selectgoodsdetail", {
            params: {
                goodsId: this.goodsId
            }
        }).then(
            function(res) {
                this.goodsTitle = res.body.goodsEO.title;
                this.regionName = res.body.goodsEO.serviceProviderName + "/" + res.body.goodsEO.regionName + "/" + res.body.goodsEO.serverName
            }
            )
        //        this.getCloudCount();
        this.$nextTick(
            function() {
                this.onLoadCheck()
            }
        )
        //        this.messageInterval = setInterval(()=>this.messageFunc(),3000)
        this.getServiceQQ()
        this.interval = setInterval(() => this.onLoadCheck(), 1000)

        this.checkShowAnNiuInterval = setInterval(() => {
            self.checkShowAnNiu();
        }, 3000)
    },
    methods: {
        goBack(){
          var self = this;
            clearInterval(self.checkShowAnNiuInterval);
            clearInterval(this.interval);
            window.location.href = "/vue/buyerCenter/buyerOrder/mobgoods/"+self.orderId;
        },
        checkShowAnNiu() {
            var self = this;
            this.$http.jsonp(self.yyhServer+"/api/CloudVerification-cloudvalidate-service/rs/valOrder/query_order_validateState", {
                params: {
                    valorderId: this.validateId,
                    times: "1497941705",
                    sign: '505e770097ebebbd5dc8aa3b3ad447d4'
                },
                jsonp: 'callback'
            }).then(
                function(res) {
//                    console.log(res.data.json.validateState + "// //隐藏再次验号按钮 validateState大于5时验号成功")
                    if (res.data.json.validateState > 5) {
                        if (self.yyhCount == 2) {
                            self.showAnniu = false;
                            clearInterval(self.checkShowAnNiuInterval)
                        }
                    }
                    if (self.checkFaild) {
                        clearInterval(this.interval);
                    }
                })
        },
        reCheck() {
            var self = this;
            self.$http.jsonp(
                self.yyhServer+"/api/CloudVerification-cloudvalidate-service/rs/UserValFlow/user_beginsVal_feedback",
                {
                    params: {
                        orderId: this.orderId,
                        times: 1497941705,
                        sign: "505e770097ebebbd5dc8aa3b3ad447d4"
                    },
                    jsonp: 'callback'
                }
            ).then(
                function(res) {
                    if (res.data.responseStatus.code == "00") {
                        var validateId = res.data.validateOrder.id;
                        //                      var validateId = 123;
                        window.location.href = "/vue/buyerCenter/cloudCheck?goodsId=" + self.goodsId + "&validateId=" + validateId + "&orderId=" + self.orderId;
                    } else {
                        self.$toast(res.data.responseStatus.message)
                        //                      self.yyhXyShow = false;
                    }
                }
                )
        },
        homeShow() {
            if (this.threePoint == false) {
                this.threePoint = true
            } else {
                this.threePoint = false
            }
        },
        onLoadCheck() {
            var self = this;
            if(self.redfingerErrCode > 0||self.scriptErrCode > 0){
                return
            }
            this.$http.jsonp(self.yyhServer+"/api/CloudVerification-cloudvalidate-service/rs/valOrder/query_order_validateState", {
                params: {
                    valorderId: this.validateId,
                    times: "1497941705",
                    sign: '505e770097ebebbd5dc8aa3b3ad447d4'
                },
                jsonp: 'callback'
            }).then(
                function(res) {
                    this.redfinger = window.redfinger;
                    //                  self.loginTime = res.body.json.startTime;
                    //                  if(res.body.count<1){
                    //                      self.yyhCount = 1
                    //                  }else {
                    //                      self.yyhCount  = res.body.count;
                    //                  }

                    //                  self.validateState = 7;
                    self.validateState = res.data.json.validateState;
                    // //隐藏再次验号按钮
                    if (res.data.json.validateState > 5) {
                        var p = new Promise(function(resolve, reject) {
                            if (self.yyhCount == 2) {
                                resolve(self.yyhCount);
                            }
                        });
                        p.then((res) => {
                            self.showAnniu = false;
                        })
                    }
                    if (res.data.json.progressBataStatus) {
                        if(res.data.json.progressBataStatus<self.processState){
                            if(!self.processback){
                                self.message = "游戏启动不给力，正在重新加载"
                                self.processback = true;
                            } else {
                                self.fiveCount --;
                                if(self.fiveCount==0){
                                    self.message = "加载中（加载完成后即可查验帐号）"
                                }
                            }
                            return
                        }else {
                            self.processState = res.data.json.progressBataStatus;
                        }
                    } else {
                        self.processState = 0;
                    }
                    if (res.body.json.scriptErrorCold && res.body.json.scriptErrorCold != 0) {
                        if(res.body.json.scriptErrorCold == 121){
                        self.getYYH = 2;
                        self.dialogBoxShow = true;
                        self.scriptErrCode = res.body.json.scriptErrorCold;
                        self.errMessage = "验号单已结束，请与客服联系。"
                        }else{
                        self.getYYH = 2;
                        self.dialogBoxShow = true;
                        self.scriptErrCode = res.body.json.scriptErrorCold;
                        self.errMessage = "帐号登陆失败，客服将联系卖家为你提供最新的帐号截图"
                        }
                        if (res.body.json.scriptErrorCold == 119||res.body.json.scriptErrorCold == 120||res.body.json.scriptErrorCold == 107){
                            self.errMessage = "账号查验异常，验号任务终止"
                            clearInterval(this.interval);
                            self.closeBox();

                        }
                        clearInterval(this.interval);
                        self.closeBox();

                    }

                    if ((res.body.json.validateState == 5&&res.body.json.scriptErrorCold != 119)||(res.body.json.validateState == 5&&res.body.json.scriptErrorCold != 120)) {
                        if (self.link == false) {
                            if (this.redfinger) {
                                if (self.redfingerInit == false) {
                                    redfinger.init();
                                    //                                  alert()
                                    self.redfingerInit = true;
                                    self.closeBoxShow = true;


                                }
                                if (self.padCode.length > 1) {
                                    var code1 = 0;
                                    var source1 = 0;
                                    this.link = true;
                                }
                                //                                      this.play(this.padCode,this.resultCode,this.webControlCode,this.controlIp,this.controlPort,this.sessionId,this.userId)
                            }
                        }
                        redfinger.onErrorMessage = function(code) {
                            console.log("错误码-------------" + code);
                            if (code == '196625' || code == '196627' || code == "196631" || code == '196613' || code == '196629') {
                                self.redfingerErrCode = code;
                                self.$http.jsonp(self.yyhServer+"/api/CloudVerification-cloudvalidate-service/rs/UserValFlow/user_vider_exception", {
                                    params: {
                                        validateId: self.validateId,
                                        status: 1,
                                        times: "1497941705",
                                        sign: '505e770097ebebbd5dc8aa3b3ad447d4'
                                    },
                                    jsonp: 'callback'
                                }).then(
                                    function(res) {
                                        clearInterval(self.interval);
                                        console.log(res.data.responseStatus + "message: 视频流异常异常回调成功");
                                        redfinger.destory();
                                        console.log("退到桌面")
                                        self.closeBoxShow = false;
//                                let cCanvs = document.getElementById('closeBoxCanvs');
//                                cCanvs.style.height = window.screen.height + "px";
//                                cCanvs.style.width = window.screen.width + "px";
//                                cCanvs.style.backgroundColor = "#000000";
//                                cCanvs.style.position = 'absolute';
//                                cCanvs.style.bottom = "0px";
//                                cCanvs.style.left = '0px';
                                        self.checkBox = false;
                                        self.dialogBoxShow = true;
                                        self.errMessage = "账号查验异常，验号任务终止";

                                    })


                            }
                        };
                        if (res.body.json.ClickEventTime > 0) {
                            self.countTime = res.body.json.ClickEventTime - res.body.json.currentTime
                        }
                        if (self.countTime > 300000) {
                            self.countTime = 300000;
                        }
                        //二次验号后再次验号按钮隐藏

                        if (this.countTime < 1000) {
                            clearInterval(this.interval);
                            self.closeBox();
                            this.checkBox = false;
                            this.getYYH = 3;
                            if (self.yyhCount == 2) {
                                if (res.body.json.validateState <= 6) {
                                    self.showAnniu = false;
                                }
                            }
                        } else if(self.redfingerErrCode<1&&self.scriptErrCode<1){
                            redfinger.onReady = function(code, source) {
                                //                                          alert("code:"+code)
                                //                              self.$toast("code:"+code)
                                //                                          alert("source:"+source)
                                //                              self.$toast("source:"+source)
                                code1 = code;
                                source1 = source;
                                self.cloudCheck(code1, source1)
                            };

                        }
                    } else if (res.body.json.validateState >= 6) {
                        clearInterval(this.interval)
                        self.closeBox()
                        self.checkBox = false;
                        self.getYYH = 3
                        console.log(res.body.json.validateStateEnum)

                    }
                }
                )
        },
        doneOrFalse(status) {
            if (status == 0) {
                return "查验成功"
            } else if (status == 1) {
                return "查验中"
            } else if (status == 2) {
                return "查验失败"
            } else if (status == 3) {
                return "未查验"
            }else if(status == 5){
                return "查验完毕"
            }
        },
        initTime: function(needTime) {
            //needTime是整数，否则要parseInt转换
            var time = new Date(needTime);
            var y = time.getFullYear();
            var m = time.getMonth() + 1;
            var d = time.getDate();
            var h = time.getHours();
            var mm = time.getMinutes();
            var s = time.getSeconds();
            //          return y+'-'+this.add0(m)+'-'+this.add0(d)+' '+this.add0(h)+':'+this.add0(mm)+':'+this.add0(s);
            if (!needTime) {
                return "登陆中"
            } else {
                return  this.add0(m) + '-' + this.add0(d) + ' ' + this.add0(h) + ':' + this.add0(mm) + ':' + this.add0(s);
            }

        },
        initTime1: function(needTime) {
            //needTime是整数，否则要parseInt转换
            var time = new Date(needTime);
            var y = time.getFullYear();
            var m = time.getMonth() + 1;
            var d = time.getDate();
            var h = time.getHours();
            var mm = time.getMinutes();
            var s = time.getSeconds();
            //          return y+'-'+this.add0(m)+'-'+this.add0(d)+' '+this.add0(h)+':'+this.add0(mm)+':'+this.add0(s);

            if (!needTime) {
                return "暂无"
            } else {
                return this.add0(mm) + ':' + this.add0(s);
            }

        },
        add0: function(m) {
            return m < 10 ? '0' + m : m
        },
        getServiceQQ() {
            this.$http.post(this.$CONSTANTS.APIOrder + "assignCustomServie/openServiceQQ", {
                orderId: this.orderId,
            }).then(
                function(res) {
                    if (res.isOpenQQ == true) {
                        this.serviceQQ = res.serviceQQ;
                    }
                })
        },
        contactService() {
            //点击确认购买
            let self = this;
            self.enterService(1);
            if (self.serviceQQ.length >= 4) {
                if (/baidu/i.test(navigator.userAgent.toLowerCase()) || /MicroMessenger/i.test(navigator.userAgent.toLowerCase())) {
                    alert("暂不支持该浏览器，请添加客服QQ：" + res.serviceQQ)
                } else {
                    window.location.assign('mqqwpa://im/chat?chat_type=wpa&uin=' + res.serviceQQ + '&version=1&src_type=web&web_src=oicqzone.com')
                    location.href = "/vue/buyerCenter/buyerOrder/mobgoods/" + self.orderId
                }
            } else {
                setTimeout(() => {
                    // location.href="/member/huanxin.html?orderId=" + self.orderId + "&isSeller=false";                
                    location.replace("/member/huanxin.html?orderId=" + self.orderId + "&isSeller=false")
                }, 0)
            }
        },
        //      getCloudCount(){
        //          this.$http.jsonp("https://yyh.5173.com/api/CloudVerification-cloudvalidate-service/rs/cloudWeb/order_count_callBalk",{
        //              params:{
        //                  orderId:this.orderId,
        //                  times:"1497941705",
        //                  sign:'505e770097ebebbd5dc8aa3b3ad447d4'
        //              },
        //              jsonp: 'callback'
        //          }).then(
        //              function (res) {
        ////                  console.log("22222222222",res.body.count)
        //                  this.yyhCount = res.body.count;
        //                  if ( res.body.count<=2){
        //                      this.getYYH = 1
        //                  }else {
        //                      this.getYYH = 3
        //                  }
        //              }
        //          )
        //      },
        enterService(status) {
            let self=this;
            console.log(status + '::status')
            this.$nextTick(function() {
                let self = this;
                self.$http.jsonp(self.yyhServer+"/api/CloudVerification-cloudvalidate-service/rs/UserValFlow/user_valEnd_Callback", {
                    params: {
                        validateId: self.validateId,
                        status: status,
                        times: "1497941705",
                        sign: '505e770097ebebbd5dc8aa3b3ad447d4'
                    },
                    jsonp: 'callback'
                }).then(
                    function(res) {
                        console.log(self.validateId);
                    })
            })
        },
        // contactService() {
        //     //点击确认购买
        //     this.$http.jsonp("http://y.5173.com/api/CloudVerification-cloudvalidate-service/rs/UserValFlow/user_valEnd_Callback", {
        //         params: {
        //             orderId: this.orderId,
        //             times: "1497941705",
        //             sign: '505e770097ebebbd5dc8aa3b3ad447d4'
        //         },
        //         jsonp: 'callback'
        //     }).then(
        //         function(res) {//code 00验号成功 01验号失败
        //             // console.log(res.data.responseStatus.code)
        //             this.enterService();
        //             // if (res.data.responseStatus.code != '00') {
        //             //     this.checkFaild1 = true;
        //             //     setTimeout(() => {
        //             //         this.enterService();
        //             //     }, 2000)
        //             // } else {
        //             //     this.enterService();
        //             // }
        //         })
        // },
        // //      getCloudCount(){
        // //          this.$http.jsonp("https://yyh.5173.com/api/CloudVerification-cloudvalidate-service/rs/cloudWeb/order_count_callBalk",{
        // //              params:{
        // //                  orderId:this.orderId,
        // //                  times:"1497941705",
        // //                  sign:'505e770097ebebbd5dc8aa3b3ad447d4'
        // //              },
        // //              jsonp: 'callback'
        // //          }).then(
        // //              function (res) {
        // ////                  console.log("22222222222",res.body.count)
        // //                  this.yyhCount = res.body.count;
        // //                  if ( res.body.count<=2){
        // //                      this.getYYH = 1
        // //                  }else {
        // //                      this.getYYH = 3
        // //                  }
        // //              }
        // //          )
        // //      },
        // enterService() {
        //     if (this.serviceQQ.length >= 4) {
        //         if (/baidu/i.test(navigator.userAgent.toLowerCase()) || /MicroMessenger/i.test(navigator.userAgent.toLowerCase())) {
        //             alert("暂不支持该浏览器，请添加客服QQ：" + res.serviceQQ)
        //         } else {
        //             window.location.assign('mqqwpa://im/chat?chat_type=wpa&uin=' + res.serviceQQ + '&version=1&src_type=web&web_src=oicqzone.com')
        //             location.href = "/vue/buyerCenter/buyerOrder/mobgoods/" + this.orderId
        //         }
        //     } else {
        //         location.href = "/member/huanxin.html?orderId=" + this.orderId + "&isSeller=false"
        //     }
        // },
        greet(val) {
            this.val = val;
        },
        getVideoParams() {
            var self = this;
            this.$http.jsonp(self.yyhServer+"/api/CloudVerification-cloudvalidate-service/rs/UserValFlow/user_videoStreamData_callBack", {
                params: {
                    validateId: this.validateId,
                    times: "1497941705",
                    sign: "505e770097ebebbd5dc8aa3b3ad447d4"
                },
                jsonp: 'callback'
            }).then(
                function(res) {
                    console.log(res.data.success)
                    if (res.data.success) {
                        this.padCode = res.data.eqptVideoEO.padCode;
                        this.resultCode = res.data.eqptVideoEO.resultCode;
                        this.webControlCode = res.data.eqptVideoEO.webControlCode;
                        this.controlIp = res.data.eqptVideoEO.controlIp;
                        this.controlPort = res.data.eqptVideoEO.controlPort;
                        this.sessionId = res.data.eqptVideoEO.sessionId;
                        this.userId = res.data.eqptVideoEO.userId;
                        //                      this.loginTime = res.data.eqptVideoEO.time;
                    } else {
                        console.log(res.body.responseStatus.message);
                        clearInterval(this.interval);
                        self.getYYH = 3;
                    }
                }
                )
        },
        getCheckHistory() {
            var self = this;
            this.$http.jsonp(
                self.yyhServer+"/api/CloudVerification-cloudvalidate-service/rs/UserValFlow/val_historyData_CallBack",
                {
                    params: {
                        orderId: this.orderId,
                        times: 1497941705,
                        sign: "505e770097ebebbd5dc8aa3b3ad447d4"
                    },
                    jsonp: 'callback'
                }
            ).then(
                function(res) {
                    if (res.data.validateOrderList) {
                        self.checkRes = res.data.validateOrderList;
                        self.yyhCount = res.data.count
                        for (var i = 0; i < res.data.validateOrderList.length; i++) {
                            self.loginTime = res.data.validateOrderList[i].creatTime
                            console.log("1111111111111",self.loginTime)
                        }
                    } else {

                    }

                    //                console.log(self.checkRes.length)
                }
                )
        },
        timeDown() {
            const endTime = new Date(this.endTime)
            const nowTime = new Date();
            let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000)
            let d = parseInt(leftTime / (24 * 60 * 60))
            let h = this.formate(parseInt(leftTime / (60 * 60) % 24))
            let m = this.formate(parseInt(leftTime / 60 % 60))
            let s = this.formate(parseInt(leftTime % 60))
            if (leftTime <= 0) {
                this.closeBox()
            }
            this.time = `${m}分${s}秒`
        },
        formate(time) {
            if (time >= 10) {
                return time
            } else {
                return `0${time}`
            }
        },
        closeBox() {
            var self = this;
            http://yyh.5173.com/api/CloudVerification-cloudvalidate-service/rs/device/close_device_connection?orderId=3333&uuid=123456&times=1497941705&sign=505e770097ebebbd5dc8aa3b3ad447d4
            self.getCheckHistory()
            if(window.redfinger){
                window.setTimeout(redfinger.destory(), 1000)
            }

            clearInterval(this.interval)
            clearInterval(this.messageInterval);
            this.checkBox = false;
            this.getYYH = 3
        },
        closeBox1() {
            var self = this;
            self.recheckmsg = "重新连接"
            http://yyh.5173.com/api/CloudVerification-cloudvalidate-service/rs/device/close_device_connection?orderId=3333&uuid=123456&times=1497941705&sign=505e770097ebebbd5dc8aa3b3ad447d4
            self.getCheckHistory()
            if(window.redfinger){
                window.setTimeout(redfinger.destory(), 1000)
            }

            clearInterval(this.interval)
            clearInterval(this.messageInterval);
            this.checkBox = false;
            this.getYYH = 3
        },
        cloudCheck(code, source) {
            var self = this;
            this.checkBox = true;
            this.play(this.padCode, this.resultCode, this.webControlCode, this.controlIp, this.controlPort, this.sessionId, this.userId, code, source)
        },
        play(padCode, resultCode, webControlCode, controlIp, controlPort, sessionId, userId, code, source) {
            var self = this;
            console.log("play")
            console.log("++++++++++", code)
            console.log("------------", source)
            console.log("padCode", padCode);
            console.log("webControlCode", webControlCode);
            console.log("controlIp", controlIp);
            console.log("controlPort", controlPort);
            console.log("sessionId", sessionId);
            console.log("userId", userId);
            redfinger.config.protocol = 'wss';
            var configInfo = {
                "padCode": padCode,
                "resultCode": 0,
                "resultInfo": {
                    "webControlList": [
                        {
                            "webControlCode": webControlCode,
                            "webControlInfoList": [
                                {
                                    "controlIp": controlIp,
                                    "controlPort": controlPort
                                }
                            ]
                        }
                    ],
                    "sessionId": sessionId,
                    "userId": userId
                }
            };
                redfinger.play('redFingerPhone', redfinger.VIDEO_BITRATE_NORMAL, '', configInfo);
            redfinger.onOpen = function(code, result) {
                console.log(code);
                if (code == '196625' || code == '196627' || code == "196631" || code == '196613' || code == '196629') {
                    self.redfingerErrCode = code;
                    self.$http.jsonp(self.yyhServer+"/api/CloudVerification-cloudvalidate-service/rs/UserValFlow/user_vider_exception", {
                        params: {
                            validateId: self.validateId,
                            status: 1,
                            times: "1497941705",
                            sign: '505e770097ebebbd5dc8aa3b3ad447d4'
                        },
                        jsonp: 'callback'
                    }).then(
                        function(res) {
                            clearInterval(self.interval);
                            console.log(res.data.responseStatus + "message: 视频流异常异常回调成功");
                            redfinger.destory();
                            console.log("退到桌面")
                            self.closeBoxShow = false;
//                                let cCanvs = document.getElementById('closeBoxCanvs');
//                                cCanvs.style.height = window.screen.height + "px";
//                                cCanvs.style.width = window.screen.width + "px";
//                                cCanvs.style.backgroundColor = "#000000";
//                                cCanvs.style.position = 'absolute';
//                                cCanvs.style.bottom = "0px";
//                                cCanvs.style.left = '0px';
                            self.checkBox = false;
                            self.dialogBoxShow = true;
                            self.errMessage = "账号查验异常，验号任务终止";

                        })


                }
            };

            //          redfinger.onTimeOut=function(code)
            //          {
            //              if(code==2) {
            //                  window.setTimeout(redfinger.destory(),1000)
            //              }
            //          }
        },
    }
}
</script>
<style src="css/common/list-cl.css" ></style>
<style scoped>
/* #closeBoxCanvs{
    position: absolute;
    top:0;
    left: 0;
} */

#lockBox {
    width: 100%;
    height: 100%;
}

#lockBox img {
    width: 100%;
}

#redFingerPhone {
    width: 100%;
    height: 100%;
    z-index: 2000;
    position: fixed;
}

#closeBox {
    width: 1rem;
    height: 1rem;
    position: absolute;
    left: 20%;
    background-image: url("../../../assets/images/yyhclose.png");
    /*background: no-repeat;*/
    background-size: 1rem 1rem;
    transform: rotate(90deg);
}

#closeRedFinger {
    color: #fff;
    width: 100%;
    height: 0.62rem;
    line-height: 0.62rem;
    text-align: center;
}

.close {
    width: 100%;
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
    color: #fff;
}

.yun-post {
    height: auto;
    display: block;
    overflow: hidden;
}

.progress {
    width: 45%;
    margin: 0 auto;
    height: 0.25rem;
    background-color: #dedfe1;
    border-radius: 0.2rem;
    position: relative;
    border: 1px solid #c9cacc;
}

.progress,
.progress-striped .progress-bar,
.progress-bar-striped {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    -webkit-background-size: 0.4rem 0.4rem;
    background-size: 0.4rem 0.4rem;
}

.progress .progress-bar {
    animation: animate-positive 2s;
    position: absolute;
    top: 0;
    left: 0;
    height: 0.25rem;
    background-color: #00d2d8;
    border: 1px solid #00abb7;
    border-radius: 0.2rem;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
}

.progress span {
    position: absolute;
    right: -16%;
    height: 0.2rem;
    line-height: 0.2rem;
    font-size: 0.2rem;
    color: #481c00;
}

.progress .active {
    animation: reverse progress-bar-stripes 0.40s linear infinite, animate-positive 200s;
}

@-webkit-keyframes animate-positive {
    0% {
        width: 0%;
    }
}

@keyframes animate-positive {
    0% {
        width: 0%;
    }
}

@-webkit-keyframes progress-bar-stripes {
    from {
        background-position: 0.40rem 0
    }

    to {
        background-position: 0 0
    }
}

@-o-keyframes progress-bar-stripes {
    from {
        background-position: 0.40rem 0
    }

    to {
        background-position: 0 0
    }
}

@keyframes progress-bar-stripes {
    from {
        background-position: 0.40rem 0
    }

    to {
        background-position: 0 0
    }
}
</style>
